
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="main-wrapper">
<header>
<nav>
<div class="logo"><a href="##">张小窝</a></div>
<ul>
<li><a href="##" class="active">首页</a></li>
<li><a href="##">222222222222</a></li>
<li><a href="##">222222222222</a></li>
<li><a href="##">222222222222</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>张小窝</h1>
<p class="sub-heading">
55555555555555555555555555555555555555555
55555555555555555555555555555555555555555</p>
<button>养我</button>
<div class="more">更多</div>
</div>
</div>
</header>
<div class="content">
<section class="green-section">

<div class="wrapper">
<div>
<h2>一个标题</h2>
<div class="hr"></div>
<p class="sub-heading">Lorem645662
255465632326262</p>
</div>
<div class="icon-group">
<span class="icon">item1</span>
<span class="icon">item1</span>
<span class="icon">item1</span>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section">
<img src="images/face01.jpg" alt="">
</div>
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">我是副标题 你好</div>
<p>22222222222
222222222222</p>
</div>
</div>


<div class="article-preview">
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">我是副标题 你好</div>
<p>22222222222
222222222222</p>
</div>
<div class="img-section">
<img src="images/face02.jpg" alt="">
</div>
</div>


<div class="article-preview">
<div class="img-section">
<img src="images/face03.jpg" alt="">
</div>
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">我是副标题 你好</div>
<p>22222222222
222222222222</p>
</div>
</div>
</section>


<section class="purple-section">
<div class="wrapper">
<div class="heading-wrapper">
<h2>又一个标题</h2>
<div class="hr"></div>
<div class="sub-heading">
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>标题三</h3>
<p>慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。</p>
</div>
</div>
</div>
</section>
</div>
<footer>
<ul class="share-group">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<div class="copy">
@  王小窝 --2016-5-27
</div>
</footer>
</div>

</body>
</html>